/*
* @Date: 2021/2/2
* @Author: XueChengwu <xuechengwu@erayt.com>
* @Copyright: 2015-2019 Erayt, Inc.
* @Description: If you have some questions, please contact: xuechengwu@erayt.com.
*/
import React from 'react';
import { Collapse, List, Row, Col, Input, Select, Modal, Checkbox } from 'antd';
import Icon from 'components/Icon';

const { Panel } = Collapse;
import './index.scss';

export default class extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      states: [],
      props: [],
      showStateModal: false,
      showPropModal: false,
      curProp: {},
      curState: {},
      propArrayObj: false,
      stateArrayObj: false,
    }
  }

  onNewProps = () => {
    const { props = [] } = this.state;
    props.push({
      id: XUE.getGuid(),
      name: '',
      type: '',
      value: '',
    });
    this.setState({
      props,
    });
  }

  onNewState = () => {
    const { states = [] } = this.state;
    states.push({
      id: XUE.getGuid(),
      name: '',
      type: '',
      value: '',
    });
    this.setState({
      states,
    });
  }

  onNewPropSubObject = (id) => {
    const { props = [] } = this.state;
    const propIndex = props.findIndex(vo => vo.id === id);
    if (propIndex >= 0) {
      if (!props[propIndex].sub) {
        props[propIndex].sub = [];
      }
      this.setState({
        showPropModal: true,
        curProp: props[propIndex],
        props,
      }, () => {
        if (!window.datas) {
          window.datas = {};
        }
        window.datas.props = this.state.props;
      });
    }
  }

  onNewStateSubObject = (id) => {
    const { states = [] } = this.state;
    const stateIndex = states.findIndex(vo => vo.id === id);
    if (stateIndex >= 0) {
      if (!states[stateIndex].sub) {
        states[stateIndex].sub = [];
      }
      this.setState({
        showStateModal: true,
        curState: states[stateIndex],
        states,
      }, () => {
        if (!window.datas) {
          window.datas = {};
        }
        window.datas.states = this.state.states;
      });
    }
  }

  onPropNameChange = (e, propId) => {
    const name = e.currentTarget.value;
    const { props = [] } = this.state;
    const propIndex = props.findIndex(vo => vo.id === propId);
    if (propIndex >= 0) {
      props[propIndex].name = name;
      this.setState({
        props
      }, () => {
        if (!window.datas) {
          window.datas = {};
        }
        window.datas.props = this.state.props;
      });
    }
  }

  onPropTypeChange = (value, propId) => {
    const { props = [] } = this.state;
    const propIndex = props.findIndex(vo => vo.id === propId);
    if (propIndex >= 0) {
      props[propIndex].type = value;
      this.setState({
        props,
      }, () => {
        if (!window.datas) {
          window.datas = {};
        }
        window.datas.props = this.state.props;
      });
    }
  }

  onPropValueChange = (e, propId) => {
    const { props = [] } = this.state;
    const propIndex = props.findIndex(vo => vo.id === propId);
    if (propIndex >= 0) {
      props[propIndex].value = e.currentTarget.value;
      this.setState({
        props,
      }, () => {
        if (!window.datas) {
          window.datas = {};
        }
        window.datas.props = this.state.props;
      });
    }
  }

  onStateNameChange = (e, stateId) => {
    const { states = [] } = this.state;
    const stateIndex = states.findIndex(vo => vo.id === stateId);
    if (stateIndex >= 0) {
      states[stateIndex].name = e.currentTarget.value;
      this.setState({
        states,
      }, () => {
        if (!window.datas) {
          window.datas = {};
        }
        window.datas.states = this.state.states;
      })
    }
  }

  onStateTypeChange = (value, stateId) => {
    const { states = [] } = this.state;
    const stateIndex = states.findIndex(vo => vo.id === stateId);
    if (stateIndex >= 0) {
      states[stateIndex].type = value;
      this.setState({
        states,
      }, () => {
        if (!window.datas) {
          window.datas = {};
        }
        window.datas.states = this.state.states;
      });
    }
  }

  onStateValueChange = (e, stateId) => {
    const { states = [] } = this.state;
    const stateIndex = states.findIndex(vo => vo.id === stateId);
    if (stateIndex >= 0) {
      states[stateIndex].value = e.currentTarget.value;
      this.setState({
        states,
      }, () => {
        if (!window.datas) {
          window.datas = {};
        }
        window.datas.states = this.state.states;
      });
    }
  }

  onPropOk = () => {
    const { curProp, props = [] } = this.state;
    const propIndex = props.findIndex(vo => vo.id === curProp.id);
    if (propIndex >= 0) {
      props[propIndex] = { ...curProp };
      this.setState({
        props,
        showPropModal: false,
      }, () => {
        if (!window.datas) {
          window.datas = {};
        }
        window.datas.props = this.state.props;
      });
    }
  }

  onNewSubProp = () => {
    const { curProp } = this.state;
    curProp.sub.push({
      id: XUE.getGuid(),
      name: '',
      type: 'string',
      value: '',
    });
    this.setState({
      curProp,
    });
  }

  onNewSubState = () => {
    const { curState } = this.state;
    curState.sub.push({
      id: XUE.getGuid(),
      name: '',
      type: 'string',
      value: '',
    });
    this.setState({
      curState,
    });
  }

  onSubPropDelete = (id) => {
    const { curProp } = this.state;
    const propIndex = curProp.sub.findIndex(vo => vo.id === id);
    if (propIndex >= 0) {
      curProp.sub.splice(propIndex, 1);
      this.setState({
        curProp,
      });
    }
  }

  onSubStateDelete = (id) => {
    const { curState } = this.state;
    const stateIndex = curState.sub.findIndex(vo => vo.id === id);
    if (stateIndex >= 0) {
      curState.sub.splice(stateIndex, 1);
      this.setState({
        curState,
      });
    }
  }

  subPropNameChange = (e, propId) => {
    const { curProp } = this.state;
    const { value } = e.currentTarget;
    const propIndex = curProp.sub.findIndex(vo => vo.id === propId);
    if (propIndex >= 0) {
      curProp.sub[propIndex].name = value;
      this.setState({
        curProp,
      });
    }
  }

  subStateNameChange = (e, stateId) => {
    const { curState } = this.state;
    const { value } = e.currentTarget;
    const stateIndex = curState.sub.findIndex(vo => vo.id === stateId);
    if (stateIndex >= 0) {
      curState.sub[stateIndex].name = value;
      this.setState({
        curState,
      });
    }
  }

  subPropTypeChange = (value, propId) => {
    const { curProp } = this.state;
    const propIndex = curProp.sub.findIndex(vo => vo.id === propId);
    if (propIndex >= 0) {
      curProp.sub[propIndex].type = value;
      this.setState({
        curProp,
      });
    }
  }

  subStateTypeChange = (value, stateId) => {
    const { curState } = this.state;
    const stateIndex = curState.sub.findIndex(vo => vo.id === stateId);
    if (stateIndex >= 0) {
      curState.sub[stateIndex].type = value;
    }
    this.setState({
      curState,
    });
  }

  subPropValueChange = (e, propId) => {
    const { curProp } = this.state;
    const { value } = e.currentTarget;
    const propIndex = curProp.sub.findIndex(vo => vo.id === propId);
    if (propIndex >= 0) {
      curProp.sub[propIndex].value = value;
      this.setState({
        curProp,
      });
    }
  }

  subStateValueChange = (e, stateId) => {
    const { curState } = this.state;
    const { value } = e.currentTarget;
    const stateIndex = curState.sub.findIndex(vo => vo.id === stateId);
    if (stateIndex >= 0) {
      curState.sub[stateIndex].value = value;
      this.setState({
        curState,
      });
    }
  }

  onStateOk = () => {
    const { curState, states = [] } = this.state;
    const stateIndex = states.findIndex(vo => vo.id === curState.id);
    if (stateIndex >= 0) {
      states[stateIndex] = { ...curState };
      this.setState({
        states,
        showStateModal: false,
      }, () => {
        if (!window.datas) {
          window.datas = {};
        }
        window.datas.states = this.state.states;
      });
    }
  }


  render() {
    const {
      states = [], props = [], showPropModal = false,
      showStateModal = false, curState = {},
      curProp = {},
    } = this.state;
    return (
      <React.Fragment>
        <div className="components-box">
          <Collapse defaultActiveKey={['props', 'state']}>
            <Panel
              header={
                <React.Fragment>
                  <div className="panel-header">
                    <span>Props</span>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <Icon type="add" style={{color: '#A3A3A3'}} onClick={this.onNewProps}/>
                  </div>
                </React.Fragment>
              }
              key="props"
              disabled
            >
              {
                props.map(vo => {
                  return (
                    <Row gutter={4}>
                      <Col span={8}>
                        <Input
                          placeholder="prop名"
                          defaultValue={vo.name}
                          onChange={(e) => this.onPropNameChange(e, vo.id)}
                        />
                      </Col>
                      <Col span={8}>
                        <Select
                          placeholder="类型"
                          defaultValue={vo.type}
                          onChange={(value) => this.onPropTypeChange(value, vo.id)}
                        >
                          <Select.Option value="string">字符串</Select.Option>
                          <Select.Option value="bool">布尔值</Select.Option>
                          <Select.Option value="number">数字</Select.Option>
                          <Select.Option value="object">对象</Select.Option>
                          <Select.Option value="array">数组</Select.Option>
                        </Select>
                      </Col>
                      <Col span={8}>
                        {
                          (vo.type === 'object' || vo.type === 'array') && (
                            <Icon type="code" onClick={(e) => this.onNewPropSubObject(vo.id)} />
                          )
                        }
                        {
                          vo.type !== 'object' && vo.type !== 'array' && (
                            <Input
                              placeholder="默认值"
                              defaultValue={vo.value}
                              onChange={(e) => this.onPropValueChange(e, vo.id)}
                            />
                          )
                        }
                      </Col>
                    </Row>
                  )
                })
              }
            </Panel>
            <Panel
              header={
                <React.Fragment>
                  <div className="panel-header">
                    <span>State</span>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <Icon type="add" style={{color: '#A3A3A3'}} onClick={this.onNewState} />
                  </div>
                </React.Fragment>
              }
              key="state"
              disabled
            >
              {
                states.map(vo => {
                  return (
                    <Row gutter={4}>
                      <Col span={8}>
                        <Input
                          placeholder="prop名"
                          defaultValue={vo.name}
                          onChange={(e) => this.onStateNameChange(e, vo.id)}
                        />
                      </Col>
                      <Col span={8}>
                        <Select
                          placeholder="类型"
                          defaultValue={vo.type}
                          onChange={(value) => this.onStateTypeChange(value, vo.id)}
                        >
                          <Select.Option value="string">字符串</Select.Option>
                          <Select.Option value="bool">布尔值</Select.Option>
                          <Select.Option value="number">数字</Select.Option>
                          <Select.Option value="object">对象</Select.Option>
                          <Select.Option value="array">数组</Select.Option>
                        </Select>
                      </Col>
                      <Col span={8}>
                        {
                          (vo.type === 'object' || vo.type === 'array') && (
                            <Icon type="compass" onClick={this.onNewStateSubObject} />
                          )
                        }
                        {
                          vo.type !== 'object' && vo.type !== 'array' && (
                            <Input
                              placeholder="默认值"
                              defaultValue={vo.value}
                              onChange={(e) => this.onStateValueChange(e, vo.id)}
                            />
                          )
                        }
                      </Col>
                    </Row>
                  )
                })
              }
            </Panel>
          </Collapse>
        </div>
        <Modal
          title={`${curProp.type === 'object' ? '对象结构': '数组项结构'}`}
          visible={showPropModal}
          onOk={this.onPropOk}
          onCancel={() => this.setState({ showPropModal: false })}
        >
          <table className="data-sub-table">
            <tr>
              <td width="40"><Icon type="add" onClick={this.onNewSubProp}/></td>
              <td width="100">属性名</td>
              <td width="100">类型</td>
              <td width="100">默认值</td>
            </tr>
            {
              curProp.sub && curProp.sub.map(vo =>(
                <tr key={vo.id}>
                  <td><Icon type="delete" onClick={(e) => this.onSubPropDelete(vo.id)} /></td>
                  <td>
                    <Input
                      placeholder="名称"
                      defaultValue={vo.name}
                      onChange={this.subPropNameChange}
                    />
                  </td>
                  <td>
                    <Select
                      placeholder="类型"
                      defaultValue={vo.type}
                      onChange={(value) => this.subPropTypeChange(value, vo.id)}
                    >
                      <Select.Option value="string">字符串</Select.Option>
                      <Select.Option value="number">数字</Select.Option>
                      <Select.Option value="bool">布尔值</Select.Option>
                      <Select.Option value="array">数组</Select.Option>
                    </Select>
                  </td>
                  <td>
                    <Input
                      placeholder="默认值"
                      defaultValue={vo.value}
                      onChange={(e) => this.subPropValueChange(e, vo.id)}
                    />
                  </td>
                </tr>
              ))
            }
          </table>
        </Modal>
        <Modal
          title={`${curState.type === 'object' ? '对象结构': '数组项结构'}`}
          visible={showStateModal}
          onOk={this.onStateOk}
          onCancel={() => this.setState({ showStateModal: false })}
        >
          <table className="data-sub-table">
            <tr>
              <td width="40"><Icon type="add" onClick={this.onNewSubState}/></td>
              <td width="100">属性名</td>
              <td width="100">类型</td>
              <td width="100">默认值</td>
            </tr>
            {
              curState.sub && curState.sub.map(vo =>(
                <tr key={vo.id}>
                  <td><Icon type="delete" onClick={(e) => this.onSubStateDelete(vo.id)} /></td>
                  <td>
                    <Input
                      placeholder="名称"
                      defaultValue={vo.name}
                      onChange={this.subStateNameChange}
                    />
                  </td>
                  <td>
                    <Select
                      placeholder="类型"
                      defaultValue={vo.type}
                      onChange={(value) => this.subStateTypeChange(value, vo.id)}
                    >
                      <Select.Option value="string">字符串</Select.Option>
                      <Select.Option value="number">数字</Select.Option>
                      <Select.Option value="bool">布尔值</Select.Option>
                      <Select.Option value="array">数组</Select.Option>
                    </Select>
                  </td>
                  <td>
                    <Input
                      placeholder="默认值"
                      defaultValue={vo.value}
                      onChange={(e) => this.subStateValueChange(e, vo.id)}
                    />
                  </td>
                </tr>
              ))
            }
          </table>
        </Modal>
      </React.Fragment>
    );
  }
}
